<template>
	<view class="body">
		<xk-header title="用车预约-申请"></xk-header>
		<view class="util-bar">
			<view class="estate-box">
			<u--form
			labelPosition="left"
			:model="formdata"
			:rules="rules"
			ref="uviewForm"
			>
				<u-form-item
					label="用车人*:"
					prop="apply_car_name"
					borderBottom
					ref="apply_car_name"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_car_name" placeholder="请输入用车人" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="用车部门 * :"
					prop="apply_car_dept"
					borderBottom
					ref="apply_car_dept"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_car_dept" placeholder="请输入用车部门" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="用车人电话*:"
					prop="apply_phone"
					borderBottom
					ref="apply_phone"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_phone" placeholder="请输入用车人电话" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="乘车人数:"
					prop="apply_num"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u-number-box v-model="formdata.apply_num" integer :min="1" :max="100"></u-number-box>
				</u-form-item>

				<u-form-item
					label="用车性质*:"
					prop="apply_car_type"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u-radio-group v-model="formdata.apply_car_type" placement="row">
					<u-radio shape="square" v-for="(item, index) in radioList" :key="index" :name="item.name"
						:disabled="item.disabled" active-color="#25afa2" :label="item.nameText" style="margin-right:20px;">
						{{item.nameText}}
					</u-radio>
				</u-radio-group>
				</u-form-item>

				<u-form-item
					label="结束时间:"
					prop="apply_end_time"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<view :class="formdata.apply_end_time?'':'grey-t'" @click="Tshow=true">{{formdata.apply_end_time?formdata.apply_end_time:'请输入结束时间'}}</view>
				</u-form-item>
				<u-datetime-picker
					:show="Tshow"
					v-model="apply_end_time"
					mode="datetime"
					@confirm="confirmT"
					@cancel="cancelT"
				></u-datetime-picker>
				<u-form-item
					label="出发地:"
					prop="apply_start_address"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_start_address" placeholder="请输入出发地" border="none"></u--input>
				</u-form-item>

				<u-form-item
					label="目的地:"
					prop="apply_end_address"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_end_address" placeholder="请输入目的地" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="用车事由:"
					prop="apply_car_content"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u--input v-model="formdata.apply_car_content" placeholder="请输入用车事由" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="备注:"
					prop="apply_remark"
					borderBottom
					ref="item1"
					labelWidth="120"
				>

				</u-form-item>
				<u--textarea v-model="formdata.apply_remark" placeholder="请输入备注信息" height="50" count confirmType="done"></u--textarea>
			</u--form>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn" @click="doneSubmit">提交申请</view>
		</view>
		<view style="height:100px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioList:[
					{nameText:"出差",name:"10",disabled:false},
					{nameText:"客户接待",name:"20",disabled:false},
				],
				Tshow:false,
				apply_end_time:Number(new Date()),
				formdata:{
					"apply_car_name": "",
					"apply_car_dept": "",
					"apply_phone": "",
					"apply_num": 1,
					"apply_car_type": "10",
					"apply_end_time": "",
					"apply_isdriver": "1",
					"apply_start_address": "",
					"apply_end_address": "",
					"apply_car_content": "",
					"apply_remark": "",
					"isSubmit": false
				},
				rules: {
					'apply_car_name': {
						type: 'string',
						required:true,
						message: '请填写用车人',
						trigger:['blur','change']
					},
					'apply_car_dept': {
						type: 'string',
						required:true,
						message: '请填写用车部门',
						trigger:['blur','change']
					},
					'apply_phone': {
						type: 'string',
						required:true,
						message: '请填写用车人号码',
						trigger:['blur','change']
					},
					'apply_start_address': {
						type: 'string',
						required:true,
						message: '请填写出发地',
						trigger:['blur','change']
					},
					'apply_end_address': {
						type: 'string',
						required:true,
						message: '请填写目的地',
						trigger:['blur','change']
					},
					'apply_car_content': {
						type: 'string',
						required:true,
						message: '请填写用车事由',
						trigger:['blur','change']
					},
				},
			}
		},
		onShow(){

		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height;
			});
		},
		methods: {
			confirmT(e){
				console.log(e)
				this.formdata.apply_end_time=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.Tshow=false
			},
			cancelT(){
				this.Tshow=false
			},
			cancelDate(){
				this.showDate=false;
			},
			doneSubmit(){
				this.$refs.uviewForm.validate().then(res => {
					//uni.$u.toast('校验通过')
					console.log(this.formdata)
					if(this.formdata.apply_end_time==''){
						uni.$u.toast('请输入结束时间');
						return false;
					}
					this.$util.confirm({
						content: "确定提交新增申请？",
						confirmText: "确定"
					}).then(isConfirm => {
						if (isConfirm) {
							this.$util.post({
								url: "app/poCarReserve/apply",
								data: this.formdata,
							}).then(res => {
								uni.$emit('refreshHomeDataList')
								uni.$emit('refreshVehicleInfo')
								uni.redirectTo({
									url: '/pagesB/car-reservation/car-reservation-list'
								})
							})

						}
					})
				}).catch(errors => {
					uni.$u.toast('请输入必填项')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 30px 10px;
	margin:10px;
	border-radius:6px;
}
.grey-t{
	color:#CCCCCC;
}
.loadText{
	padding:5px 0px 20px 0px;
}
</style>
